<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Title</title>
    <link rel="stylesheet" href="bower_components/semantic/dist/semantic.css">
    <style>
        .main.container{
            padding-top: 50px;
        }
    </style>
</head>
<body>
<div class="ui inverted fixed menu">
    <div class="header item">Tutorial</div>
</div>
<div class="ui main container" id="app">
 <p @click="demo2">

     <!--v-model.lazy用法-->
     <input type="text" v-model.lazy="message"><br>

     <!--v-model.trim用法-->
     <input type="text" v-model.trim="message"><br>

     <!--keyup用法,如按空格生效-->
     <input type="text" v-model.trim="message" @keyup.space="demo"><br>

     <!--自定义-->
     <input type="text" v-salut.a.b.c="message">

     ==={{ message }}===


 </p>
</div>



<script src="bower_components/vue/dist/vue.js"></script>
<script src="js/app_lesson5.2.js"></script>

</body>
</html>